<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/templateLayout.xhtml">


	<f:metadata>
		<f:viewParam name="id" value="#{cuotaPagoBean.id}" />
		<f:event type="preRenderView" listener="#{cuotaPagoBean.inicio()}" />
	</f:metadata>

	<ui:define name="centerContent">
		<h:panelGroup layout="block"
			class="title ui-widget-header ui-corner-all"
			style="padding: 8px; font-size: 16px !important; text-align: center;">
			<h:outputText value="#{msgs['form.cuotas']}" />

			<h:form id="cuotas">
			<p:growl globalOnly="true" id="msgGrowl" sticky="true" showSummary="true" showDetail="true" />
			<p:messages id="messagesFilter" showDetail="true"  closable="true" showSummary="true"/>
				
			<p:panel id="panelView">					
			<p:panelGrid style="width: 100%;text-align:left">
			<p:row>
							<p:column style="width: 50%;">
								<p:panelGrid id="panelFechaInquilino"
						style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="4">Datos</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column style="width: 10%;">
								<h:outputLabel value="#{msgs['form.inquilino']}:" />
							</p:column>
							<p:column style="width: 30%;">
								<h:outputLabel
									value="#{cuotaPagoBean.entity.inquilino.apellidoNombre()}" />
							</p:column>							
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="fechaInicio"
									value="#{msgs['form.fecini']}: " />
							</p:column>
							<p:column>
								<h:outputLabel id="fechaInicio"
									value="#{cuotaPagoBean.entity.fechaInicio}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel  value="#{msgs['form.fecfin']}: " />
							</p:column>
							<p:column>
								<h:outputLabel value="#{cuotaPagoBean.entity.fechaFin}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="direccion"
									value="#{msgs['form.direccion']}: " />
							</p:column>
							<p:column>
								<h:outputLabel id="direccion" size="50"
									value="#{cuotaPagoBean.entity.propiedad.direccionCompleta()}" />
							</p:column>
						</p:row>
					</p:panelGrid>
							</p:column>
							<p:column style="width: 50%;">
									<p:panelGrid style="width: 100%;text-align:left">
									<f:facet name="header">
										<p:row>
											<p:column colspan="2">#{msgs.deuda}</p:column>
										</p:row>
									</f:facet>
									<p:row>
										<p:column style="width: 30%;">
											<h:outputLabel value="#{msgs['deuda.preincrpcion']}:" />
										</p:column>
										<p:column style="width: 60%;text-align:right;">
											<h:outputLabel
												value="#{cuotaPagoBean.entity.montoDeudaPreIncripcion()}">
												<f:convertNumber currencySymbol="$" type="currency"
													maxFractionDigits="2" />
											</h:outputLabel>
										</p:column>
									</p:row>
									<p:row>
										<p:column>
											<h:outputLabel value="#{msgs['deuda.cuota.vencida']}:" />
										</p:column>
										<p:column style="width: 60%;text-align:right;">
											<h:outputLabel
												value="#{cuotaPagoBean.entity.montoDeudaCuotasVencidas()}">
												<f:convertNumber currencySymbol="$" type="currency"
													maxFractionDigits="2" />
											</h:outputLabel>
										</p:column>
									</p:row>
									<p:row>
										<p:column>
											<h:outputLabel value="#{msgs['deuda.cuota.parcial']}:" />
										</p:column>
										<p:column style="width: 60%;text-align:right;">
											<h:outputLabel
												value="#{cuotaPagoBean.entity.montoDeudaPagoParcial()}">
												<f:convertNumber currencySymbol="$" type="currency"
													maxFractionDigits="2" />
											</h:outputLabel>
										</p:column>
									</p:row>
									<p:row>
										<p:column>
											<h:outputLabel value="#{msgs['deuda.total']}:" />
										</p:column>
										<p:column style="width: 60%;text-align:right;">
											<h:outputLabel
												value="#{cuotaPagoBean.entity.montoDeudaTotal()}">
												<f:convertNumber currencySymbol="$" type="currency"
													maxFractionDigits="2" />
											</h:outputLabel>
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>
			</p:row>			
			</p:panelGrid>
			</p:panel>					
				

				<p:spacer height="20px" />
				
				<p:panel id="panelCuotaPreIncripcion" header="#{msgs['deuda.preincrpcion']}">                
                <p:dataTable id="listPre" var="item" value="#{cuotaPagoBean.entity.cuotasPreIngreso}" 
                rowStyleClass="#{item.color()}" sortBy="#{item.prioridadDePago}">					
					<p:column headerText="#{msgs.concepto}" styleClass="texto-grilla">
						<h:outputText value="#{item.concepto.toString()}" />
					</p:column>
					<p:column headerText="#{msgs['form.estado']}" styleClass="texto-grilla">
						<h:outputText value="#{item.estado.toString()}" />
					</p:column>
					<p:column headerText="#{msgs['form.monto']}" styleClass="monto-grilla">
						<h:outputText value="#{item.monto}">
							<f:convertNumber currencySymbol="$" type="currency"
								maxFractionDigits="2" />
						</h:outputText>
					</p:column>
					<p:column headerText="#{msgs['monto.pagado']}" styleClass="monto-grilla">
						<h:outputText value="#{item.montoPagado}">
							<f:convertNumber currencySymbol="$" type="currency"
								maxFractionDigits="2" />
						</h:outputText>
					</p:column>
					<p:column headerText="#{msgs['fecha.pago']}">
						<h:outputText value="#{item.fechaPago}">
							<f:convertDateTime pattern="dd/MM/yyyy"/>
						</h:outputText>
					</p:column>
					<f:facet name="footer">
						<p:toolbar>
							<p:toolbarGroup>					
							<p:commandButton value="Pagar" action="#{cuotaPagoBean.initValoresPreIngreso()}"
							oncomplete="dglPagoPreIngreso.show();" update=":cuotas:dglPagoPreIngreso" 
							disabled="#{cuotaPagoBean.entity.preIngresoPago()}"/>							
							<p:commandButton  value="Recibo" onclick="dglRecibo.show();recibopreingreso();" />															
							</p:toolbarGroup>
						</p:toolbar>
					</f:facet>					
				</p:dataTable>			
                </p:panel>
				

				<p:spacer height="20px" />

				<p:dataTable id="listcuotas" var="item"	rowStyleClass="#{item.color}" paginator="true" paginatorPosition="bottom" rows="12" paginatorAlwaysVisible="false"
				value="#{cuotaPagoBean.entity.cuotas}" sortBy="#{item.nroCuota}">
				<f:facet name="header">								
								<h:outputText value="#{msgs['form.cuota']}" />
				</f:facet>
					<p:column headerText="#{msgs['form.numerocuota']}"
						filterBy="#{item.nroCuota}" sortBy="#{item.nroCuota}">
						<h:outputText value="#{item.nroCuota}" />
					</p:column>
					<p:column headerText="#{msgs['form.estado']}" styleClass="texto-grilla">
						<h:outputText value="#{item.estado.toString()}" />
					</p:column>
					<p:column headerText="#{msgs['form.fecha']}">
						<h:outputText value="#{item.fecha}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</p:column>
					<p:column headerText="#{msgs['form.monto']}" styleClass="monto-grilla">
						<h:outputText value="#{item.montoInquilino}">
							<f:convertNumber currencySymbol="$" type="currency"
								maxFractionDigits="0" />
						</h:outputText>
						 <f:facet name="footer">  
								 <h:outputText value="#{cuotaPagoBean.entity.montoTotal()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="2" />
								</h:outputText>                			
            			</f:facet>  
					</p:column>
					<p:column headerText="#{msgs['form.montopagado']}" styleClass="monto-grilla">
						<h:outputText value="#{item.montoInquilinoPagado}">
							<f:convertNumber currencySymbol="$" type="currency"
								maxFractionDigits="0" />
						</h:outputText>
						<f:facet name="footer">  
								 <h:outputText value="#{cuotaPagoBean.entity.montoDeudaPagoParcial()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="2" />
								</h:outputText>                			
            			</f:facet>  
					</p:column>
					<p:column headerText="#{msgs['form.fechapago']}">
						<h:outputText value="#{item.fechaPago}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</p:column>
					<p:column headerText="Intereses a la Fecha" styleClass="monto-grilla">
						<h:outputText value="#{cuotaPagoBean.intereses(item)}">
							<f:convertNumber currencySymbol="$" type="currency"	maxFractionDigits="2" />
						</h:outputText>
						<f:facet name="footer">  
								 <h:outputText value="#{cuotaPagoBean.totalItereses(cuotaPagoBean.entity)}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="2" />
								</h:outputText>                			
            			</f:facet>  
					</p:column>
					<p:column style="width: 150px;">
						<p:commandButton rendered="#{cuotaPagoBean.habilitarPagar(item)}" disabled="#{not cuotaPagoBean.entity.preIngresoPago()}"
							value="Pagar" action="#{cuotaPagoBean.seleccionCuotaPagar(item)}"
							oncomplete="dlgPago.show();" update=":cuotas:dglPago" />
						<p:commandButton  value="Recibo" onclick="dglRecibo.show();recibocuotaalquiler();" rendered="#{not item.estadoPendientePago()}" />
					</p:column>				
				</p:dataTable>
				
				
				<ui:include src="/templates/toolbarView.xhtml" />
								
				<p:dialog id="dglPago" widgetVar="dlgPago" width="350" height="100"
					modal="false" closeOnEscape="true" showEffect="clip"
					hideEffect="clip" closable="true" resizable="false">
					<f:facet name="header">
							Pago de Cuota Nro. #{cuotaPagoBean.cuotaPagar.nroCuota}
				</f:facet>
					<p:panelGrid style="width: 100%;text-align:left">
						<p:row>
							<p:column style="width: 50%;">
								<h:outputLabel value="#{msgs['form.monto']} Cuota" />
							</p:column>
							<p:column style="width: 50%;">
								<h:outputLabel
									value="#{cuotaPagoBean.cuotaPagar.montoInquilino}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="0" />
								</h:outputLabel>
							</p:column>
						</p:row>						
						<p:row>
							<p:column style="width: 50%;">
								<h:outputLabel value="#{msgs['deuda.cuota.parcial']}" />
							</p:column>
							<p:column style="width: 50%;">
								<h:outputLabel
									value="#{cuotaPagoBean.entity.montoDeudaPagoParcial()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="0" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column style="width: 20%;">
								<h:outputLabel value="#{msgs['form.monto']} a Pagar" />
							</p:column>
							<p:column>
								<pe:inputNumber style="text-align:left"
									value="#{cuotaPagoBean.montoPagar}" decimalPlaces="0" maxValue="#{cuotaPagoBean.maxMontoPagar}"/>
							</p:column>
						</p:row>
					</p:panelGrid>
					<f:facet name="footer">
						<h:panelGroup layout="block"
							style="text-align: right; padding: 2px;">

							<h:panelGroup layout="block"
								style="text-align:center; padding-bottom:8px; font-style:italic;">
								<h:outputText
									value="Pago de Cuotas de Alquiler." />
							</h:panelGroup>

							<p:commandButton value="Pagar Cuota"
								action="#{cuotaPagoBean.pagarCuota()}"							
								oncomplete="dlgPago.hide()" update=":cuotas, :cuotas:dglRecibo"/>
							<p:commandButton value="Cancelar" onclick="dlgPago.hide()" />
						</h:panelGroup>
					</f:facet>
				</p:dialog>
				
				<p:dialog id="dglPagoPreIngreso" widgetVar="dglPagoPreIngreso" width="350" height="150"
					modal="false" closeOnEscape="true" showEffect="clip"
					hideEffect="clip" closable="true" resizable="false">
					<f:facet name="header">
							Pago Pre Ingreso
					</f:facet>
					<p:panelGrid style="width: 100%;text-align:left">
						<p:row>
							<p:column style="width: 50%;">
								<h:outputLabel value="Monto Total" />
							</p:column>
							<p:column style="width: 50%;">
								<h:outputLabel
									value="#{cuotaPagoBean.entity.montoPreIngresoTotal()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="0" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel value="Monto Pagado" />
							</p:column>
							<p:column>
								<h:outputLabel
									value="#{cuotaPagoBean.entity.montoPreIngresoPagado()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="0" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel value="Monto Deuda" />
							</p:column>
							<p:column>
								<h:outputLabel
									value="#{cuotaPagoBean.entity.montoDeudaPreIncripcion()}">
									<f:convertNumber currencySymbol="$" type="currency"
										maxFractionDigits="0" />
								</h:outputLabel>
							</p:column>
						</p:row>
						<p:row>
							<p:column style="width: 20%;">
								<h:outputLabel value="#{msgs['form.monto']} a Pagar" />
							</p:column>
							<p:column>
								<pe:inputNumber style="text-align:left"	value="#{cuotaPagoBean.montoPagarPreIngreso}" 
									decimalPlaces="2" maxValue="#{cuotaPagoBean.maxMontoPagarPreIngreso}"/>
							</p:column>
						</p:row>
					</p:panelGrid>
					<f:facet name="footer">
						<h:panelGroup layout="block"
							style="text-align: right; padding: 2px;">

							<h:panelGroup layout="block"
								style="text-align:center; padding-bottom:8px; font-style:italic;">
								<h:outputText
									value="Pago de Cuotas de Pre ingrso." />
							</h:panelGroup>

							<p:commandButton value="Pagar Pre Ingreso"
								action="#{cuotaPagoBean.pagarCuotaPreIngreso()}"								
								oncomplete="dglPagoPreIngreso.hide()" update=":cuotas, :cuotas:dglRecibo" />
							<p:commandButton value="Cancelar" onclick="dglPagoPreIngreso.hide()" />
						</h:panelGroup>
					</f:facet>
				</p:dialog>		
								
				<ui:include src="/pages/shared/dialogsRecibo.xhtml">
					<ui:param name="recibos" value="#{cuotaPagoBean.entity.inquilino.recibos}" />
				</ui:include>
						
						
				<script>
							function recibopreingreso()
							{
								 document.getElementById("cuotas:listRecibos:reciboconcepto:filter").selectedIndex = 1;
								 listRecibos.filter();
							}	
							function recibocuotaalquiler()
							{
								 document.getElementById("cuotas:listRecibos:reciboconcepto:filter").selectedIndex = 0;
								 listRecibos.filter();
							}						       		        
			    </script>
			</h:form>				
		</h:panelGroup>
	</ui:define>
</ui:composition>
</html>
